import React, { useState } from 'react'
import { useLocation } from 'react-router-dom'
import MyList from '../../components/MyList/index'
import { Button, Form, Input, NavBar, Popup } from 'antd-mobile';
import { useDispatch, useSelector } from 'react-redux'
import { add, del } from '../../store/penple/index'
function index() {
  const [form]=Form.useForm()
  const dispatch = useDispatch()
  const { state } = useLocation()
  const [kg, setKg] = useState(false)
  const penple = useSelector(store => store.list.penple)
  console.log(penple);
  const del1 = (v) => {
    console.log(v);
    dispatch(del(v))
  }
  const onFinish=(val)=>{
    console.log(val);
    setKg(false)
    dispatch(add(val))
    form.setFieldValue('name',[])
    form.setFieldValue('tel',[])
    form.setFieldValue('code',[])
  }
  return (
    <div>
      <NavBar>选择乘车人</NavBar>
      <MyList v={state}></MyList>
      <h2>乘车人</h2><Button onClick={() => setKg(true)}>添加</Button>
      <div>
        {
          penple.map((v, i) => {
            return <div key={i}>
              姓名：{v.name}
              手机号：{v.tel}
              身份证：{v.code}
              <Button onClick={() => del1(v.code)} >删除</Button>
            </div>
          })
        }
      </div>
      <Popup
        visible={kg}
        onMaskClick={() => {
          setKg(false)
        }}
        onClose={() => {
          setKg(false)
        }}
        position='top'
        bodyStyle={{ height: '40vh' }}
      >
        <Form onFinish={onFinish}
        form={form}
          layout='horizontal'
          footer={
            <Button block type='submit' color='primary' size='large'>
             添加乘车人
            </Button>
          }
        >
          <Form.Item label='姓名' name='name'>
            <Input></Input>
          </Form.Item>
          <Form.Item label='手机号' name='tel'>
            <Input></Input>
          </Form.Item>
          <Form.Item label='身份证' name='code'>
            <Input></Input>
          </Form.Item>
        </Form>
      </Popup>
    </div>
  )
}

export default index